<template>
  <div>
    <!--  面包屑导航区域 :to="{path:'/admin/welcome' 路由跳转 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/welcome'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>业务管理</el-breadcrumb-item>
      <el-breadcrumb-item>${tableNameCn}列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  卡片视图区域  -->
    <el-card class="box-card">
      <!--   搜索与添加及刷新区域 :gutter间距  -->
      <el-row :gutter="20">
        <!--    搜索    -->
        <el-col :span="8">
          <el-input placeholder="请输入${tableNameCn}名称" v-model="queryName" id="queryName">
            <el-button slot="append" @click="selectByName" icon="el-icon-search">搜索</el-button>
          </el-input>
        </el-col>
        <!--   新增按钮    type="primary"蓝色主要 -->
        <el-col :span="6">
          <el-button type="primary" @click="saveDialogVisible = true"  icon="el-icon-folder-add">新增${tableNameCn}</el-button>
          <el-button type="info" icon="el-icon-refresh" @click="refresh()">刷新</el-button>
        </el-col>
      </el-row>
      <!--   ${tableNameCn}列表区域   -->
      <!--   ${tableNameCn}表格   -->
      <el-table  :data="${domain}s">
        <!--   模板列-数据值    -->
        <#list fieldList as field>
        <el-table-column label="${field.nameCn}" prop="${field.nameHump}"></el-table-column>
        </#list>
        <!--<el-table-column label="当前行数据" style="display: none">
          <template slot-scope="scope">
            {{scope.row}}
          </template>
        </el-table-column>-->
        <!--   模板列-操作区    -->
        <!--   模板列-操作区-状态封号开关    -->
        <el-table-column label="黑名单/有效">
          <template slot-scope="scope">
            <el-switch v-model = "scope.row.status"
                       :active-value="0"
                       :inactive-value="1"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       @change="changedStatus(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <!--   模板列-操作区-修改和删除    -->
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button type="primary" @click="showEdit${domain}(scope.row.id)" icon="el-icon-edit" size="mini">修改</el-button>
            <el-button type="danger" @click="del(scope.row.id)" icon="el-icon-delete" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  分页插槽    -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[1, 5, 50, 100]"
          :page-size="queryInfo.size"
          layout="total, sizes, prev, pager, next,jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <!--  添加模态框  -->
    <el-dialog
        title="添加${tableNameCn}信息"
        :visible.sync="saveDialogVisible"
        width="50%"
        @close = "saveDialogClosed">
      <!--   内容主体区域   -->
      <el-form :model="${domain}" :rules="saveFormRules" ref="saveFormRef" label-width="110px">
        <#list fieldList as field>
          <el-form-item label="${field.nameCn}" prop="${field.nameHump}">
            <el-input v-model="${domain}.${field.nameHump}"></el-input>
          </el-form-item>
        </#list>
      </el-form>
      <!--  底部按钮区域   -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save${domain}">保 存</el-button>
        <el-button @click="saveDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!--  修改模态框  -->
    <el-dialog
        title="修改${tableNameCn}信息"
        :visible.sync="editDialogVisible"
        width="50%"
        @close = "editDialogClosed">
      <!--   内容主体区域   -->
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="110px">
        <#list fieldList as field>
        <el-form-item label="${field.nameCn}" prop="${field.nameHump}">
          <el-input v-model="editForm.${field.nameHump}"></el-input>
        </el-form-item>
        </#list>
      </el-form>
      <!--  底部按钮区域   -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="edit${domain}">保 存</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/*
* 方法 methods:
*   list()-${tableNameCn}列表查询/刷新
*   handleSizeChange 监听页面条数变化
*   handleCurrentChange 监听页码值变化
*   addDialogClosed 监听添加模态框的关闭事件
*   editDialogClosed 监听修改模态框的关闭事件
*   add${domain} ${tableNameCn}添加
*   showEdit${domain} 修改${tableNameCn}前根据id获取${tableNameCn}对象决定是否展示模态框
*   changedStatus 状态封号
*   del 删除${tableNameCn}
*   openFullScreen() 等待Loading加载
*   refresh() 刷新
*
* 生命周期 mounted:
*   _this.list()-页面初始化时候执行list
*
* 数据 data:function ():
*   ${domain}s:[]-一个${domain}空数组
*   addDialogVisible-控制模态框显示隐藏的布尔值
*   total 总条数
*   queryInfo 请求参数块
*
* */
export default {
    name: "${Domain}",
    data:function (){
      return{
        ${domain}:{},
        ${domain}s:[],
        queryInfo:{
          page:1,
          size:5,
        },
        queryName:"",
        total:0,
        saveDialogVisible:false,
        editDialogVisible:false,
        saveFormRules:{
          name:[
            {required:true,message:'请输入${tableNameCn}名称',trigger:'blur'},
            {min:3,max:10,message:'请${tableNameCn}名称在3~10个字符之间',trigger: 'blur'}
          ],
          ${domain}Id: [
            {required:true,message:'请输入${tableNameCn}Id',trigger:'blur'},
            {min:8,max:8,message:'请输入八位的${tableNameCn}Id',trigger:'blur'}
          ]
        },
        editFormRules:{
          name:[
            {required:true,message:'请输入${tableNameCn}名称',trigger:'blur'},
            {min:3,max:10,message:'请${tableNameCn}名称在3~10个字符之间',trigger: 'blur'}
          ],
          ${domain}Id: [
            {required:true,message:'请输入${tableNameCn}Id',trigger:'blur'},
            {min:8,max:8,message:'请输入八位的${tableNameCn}Id',trigger:'blur'}
          ]
        },
        editForm:{}
      }
    },
    mounted:function (){
      let _this = this;
      _this.list(1);//组件加载时立刻执行一次查询渲染数据
    },
    methods:{
      //监听 pagesize当前页条数 改变的事件
      handleSizeChange(newSize){
        console.log(newSize)
        this.$data.queryInfo.size=newSize;
        if(!document.getElementById('queryName')==""){
          this.selectByName();
        }else{
          this.list();//重新获取查询list,达到分页切换页面前进后退
        }
      },
      //监听 页码值 改变的事件
      handleCurrentChange(newPage){
        this.$data.queryInfo.page=newPage;
        if(!document.getElementById('queryName')==""){
          this.selectByName();
        }else{
          this.list();//重新获取查询list,达到分页切换页面前进后退
        }
      },
      // 监听添加模态框的关闭事件
      saveDialogClosed(){
        let _this = this;
        _this.$refs.saveFormRef.resetFields()
      },
      // 监听添加模态框的关闭事件
      editDialogClosed(){
        let _this = this;
        _this.$refs.editFormRef.resetFields()
      },
      // 查询 所有${tableNameCn}
      list(page){
      let _this = this;
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/${module}/admin/${domain}/list',{
          page:this.$data.queryInfo.page,
          size:this.$data.queryInfo.size,
        }).then((response)=>{
              console.log("查询${tableNameCn}列表结果:",response);
              let resp = response.data;
              _this.${domain}s = resp.content.list;
              _this.total = resp.content.total;
            })
      },
      save${domain}(page){
        let _this = this;
        _this.$refs.saveFormRef.validate(vaild=>{
          if(!vaild)return //如果验证通过才发起添加用户的网络请求
          _this.$ajax.post(process.env.VUE_APP_SERVER+'/${module}/admin/${domain}/save',_this.${domain}).then((response)=>{
            console.log("保存${tableNameCn}列表结果",response);
            let resp = response.data;
            if (resp.success){
              _this.$data.saveDialogVisible = false;
              _this.$data.editDialogVisible = false;
              _this.list(1);
              _this.$message.success('保存${tableNameCn}信息成功');
            }
          })
        })
      },
      edit${domain}(page){
        let _this = this;
        _this.$refs.editFormRef.validate(vaild=>{
          if(!vaild)return //如果验证通过才发起添加用户的网络请求
          _this.$ajax.post(process.env.VUE_APP_SERVER+'/${module}/admin/${domain}/save',_this.editForm).then((response)=>{
            console.log("修改${tableNameCn}列表结果",response);
            let resp = response.data;
            if (resp.success){
              _this.$data.saveDialogVisible = false;
              _this.$data.editDialogVisible = false;
              _this.list(1);
              _this.$message.success('修改${tableNameCn}信息成功');
            }
          })
        })
      },
      showEdit${domain}(id){
        console.log("当前行id值",id);
        let _this = this;
        _this.$ajax.get(process.env.VUE_APP_SERVER+'/${module}/admin/${domain}/selectId/'+id).then((response)=>{
          let resp = response.data;
          if(response.status !== 200){
            return this.$message.error("查询${tableNameCn}信息失败");
          }
          _this.editForm = resp.content;
          console.log("ID查询${tableNameCn}列表结果:",response);
          _this.editDialogVisible = true;
        })
      },
      changedStatus(${domain}){
        let _this = this;
        console.log("测试",${domain})
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/${module}/admin/${domain}/changedStatus',${domain}).then((response)=>{
          if(response.status !=200){
            return _this.$message.error("修改状态失败")
          }
          _this.$message.success("修改状态成功")
          console.log("改变${tableNameCn}状态结果",response);
            let resp = response.data;
        })
      },
      del(id){
        this.$confirm('此操作将${tableNameCn}永久删除, 是否继续?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log("删除当前的id",id)
          let _this = this;
          _this.openFullScreen();
          _this.$ajax.delete(process.env.VUE_APP_SERVER+'/${module}/admin/${domain}/delete/'+id).then((response)=>{
            console.log("删除${tableNameCn}列表结果:",response);
            let resp = response.data;
            if (resp.success){
              _this.list(1);
              _this.$message.success("删除${tableNameCn}成功")
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
            });
          });
        },
      openFullScreen() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 1000);
      },
      selectByName(page,queryName){
        let _this = this;
        _this.openFullScreen();
        console.log("当前搜索的name",_this.$data.queryName)
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/${module}/admin/${domain}/selectName',{
            page:this.$data.queryInfo.page,
            size:this.$data.queryInfo.size,
            name:this.$data.queryName,
          }).then((response)=>{
          console.log("模糊查询${tableNameCn}名称结果:",response);
          let resp = response.data;
          _this.${domain}s = resp.content.list;
          _this.total = resp.content.total;
        })
      },
      refresh(){
        this.openFullScreen();
        if(!document.getElementById('queryName')==""){
          this.selectByName();
        }else{
          this.list();//重新获取查询list,达到分页切换页面前进后退
        }
      }
    },
}
</script>

<style lang="less" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>